<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>message</title>
</head>

<body>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>消息提醒</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/layer/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/static/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/static/ucss/admin/app.css" media="all"/>
    <link rel="stylesheet" href="/static/ucss/admin/themes/default.css" media="all" id="skin" shs-skin/>
    <style>
        .layui-tab-content .item{
            text-align: center;
            border-bottom: 1px solid #f0f0f0;
            padding: 15px 0;
        }
        .layui-tab-content .color_orange {
            color:#FFE793;
        }
        body {
            padding: 0 20px;
        }
        table{
            text-align: center;
        }
        .layui-table th {
            text-align: center;
        }
        .nav .nav-title {
            height: 60px;
            line-height: 60px;
            border-bottom: 1px solid #f0f0f0;
        }
        .nav h4{
            padding-left: 20px;
            float: left;
        }
        .nav .nav-title button {
            float: right;
            margin-top: 16px;
            margin-right: 20px;
        }
        .nickname {
            height: 60px;
            line-height: 60px;
        }
        .fl {
            float: left;
        }
        .fr {
            float: right;
        }
        .layui-btn {
            height: 25px;
            line-height: 25px;

        }
        .nickname .name{
            padding-left: 20px;
        }
        .authority {
            padding-right: 20px;
        }
    </style>
</head>
<body>

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this">消息提醒</li>
        <li>系统公告</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">
            <table class="layui-table" id='demo1' lay-filter="message1">
            </table>
        </div>
        <div class="layui-tab-item">
            <table class="layui-table" id='demo2' lay-filter="message2">
            </table>
        </div>
    </div>
</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail">查看</a>
</script>
<script src="../../../static/layer/layui.js" charset="utf-8"></script>

<script>
    var table1;
    var table2;
    layui.use(['table', 'element'], function(){
        table1 = layui.table;
        table2 = layui.table;
        var $ = layui.jquery,
            element = layui.element;  //Tab的切换功能，切换事件监听等，需要依赖element模块

        table1.render({
            elem: '#demo1'
            , url:'/sysMessage/json/'
            , where:{TYPE:'1'}
            , cols: [[{checkbox: true, fixed: true}
                , {field: 'TITLE', title: '标题', width: 200}
                , {field: 'CONTENT', title: '内容', width: 200}
                , {fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo'}
            ]]

        });

        table2.render({
            elem: '#demo2'
            , url:'/sysMessage/json/'
            , where:{TYPE:'2'}
            , cols: [[{checkbox: true, fixed: true}
                , {field: 'TITLE', title: '标题', width: 200}
                , {field: 'CONTENT', title: '内容', width: 200}
                , {fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo'}
            ]]

        });

        //监听工具条
        table1.on('tool(message1)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.open({
                    type: 2,
                    title: '查看详情',
                    shadeClose: false,
                    shade: [0.3],
                    maxmin: true, //开启最大化最小化按钮
                    area: ['900px', '90%'],
                    scrollbar: false, //屏蔽滚动条
                    content: 'messageInfo.html?type=view&id=' + data.MESSAGE_ID
                });
            }
        });
        table2.on('tool(message2)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.open({
                    type: 2,
                    title: '查看详情',
                    shadeClose: false,
                    shade: [0.3],
                    maxmin: true, //开启最大化最小化按钮
                    area: ['900px', '90%'],
                    scrollbar: false, //屏蔽滚动条
                    content: 'messageInfo.html?type=view&id=' + data.MESSAGE_ID
                });
            }
        });



        //触发事件
        var active = {
            tabAdd: function(){
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: '新选项'+ (Math.random()*1000|0) //用于演示
                    ,content: '内容'+ (Math.random()*1000|0)
                    ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                })
            }
            ,tabDelete: function(othis){
                //删除指定Tab项
                element.tabDelete('demo', '44'); //删除：“商品管理”


                othis.addClass('layui-btn-disabled');
            }
            ,tabChange: function(){
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };

        $('.site-demo-active').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function(elem){
            location.hash = 'test='+ $(this).attr('lay-id');
        });

    });
</script>
</body>

</html>